<template>
  <div class="sales-order">
    <el-card>
      <div class="header" slot="header">账单列表</div>
      <div class="card-body">
        <!-- 账单列表 -->
        <el-table :data="salesDatas" stripe>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.salesDetails">
                <el-table-column label="商品名称" prop="product_name">
                </el-table-column>
                <el-table-column label="商品分类" prop="product_category_name">
                </el-table-column>
                <el-table-column label="商品售价" prop="sale_price">
                </el-table-column>
                <el-table-column label="商品名称" prop="product_name">
                </el-table-column>
                <el-table-column label="商品数量" prop="quantity">
                </el-table-column>
                <el-table-column label="小计" prop="subtotal">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="收银员姓名" prop="emp_name">
          </el-table-column>
          <el-table-column label="购买时间" prop="sale_date"> </el-table-column>
          <el-table-column label="订单金额" prop="total_amount">
          </el-table-column>
          <el-table-column label="实收金额" prop="received_amount">
          </el-table-column>
          <el-table-column label="找零金额" prop="change_amount">
          </el-table-column>
          <el-table-column label="支付方式" prop="payment_method">
          </el-table-column>
          <el-table-column label="备注" prop="remarks"> </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getSalesOrder } from "@/api/sales";
export default {
  data() {
    return {
      salesDatas: [],
      currentPage: 1,
      pageSize: 10,
      total: 3,
    };
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.loadSalesData();
    },
    handleCurrentChange(page) {
      this.pageSize = page;
      this.loadSalesData();
    },
    loadSalesData() {
      getSalesOrder({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      }).then((resp) => {
        if (resp.data.code == 20000) {
          this.salesDatas = resp.data.data;
          this.total = resp.data.total;
        }
      });
    },
  },
  created() {
    this.loadSalesData();
  },
};
</script>

<style lang="less" scoped></style>
